﻿<?xml version="1.0" encoding="utf-8" ?>
<html
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:js="http://www.codeplex.com/JSClientPages/JSElements">
    <head>
        <title>Page 1</title>
        <meta name="JSClientPage" content="employee-listing" />
    </head>
    <body>                
        <h3>Summary</h3>        
        
        <table class="summary">
            <tbody>
                <tr>
                    <th>Number of Employees:</th>
                    <td>
                        <js:output value="input.employees.length" />
                    </td>
                </tr>
                <tr>
                    <th>Average Salary</th>
                    <td>
                        <js:output value="formatCurrency(input.averageSalary)" />
                    </td>
                </tr>
            </tbody>
        </table>      

        <h3>All Employees</h3>
        <js:table class="listing">
            <thead>                
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Position</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <js:tbody>
                <js:forEach collection="input.employees" item="employee">
                    <tr>
                        <td>
                            <js:output value="employee.firstName" />
                        </td>
                        <td> 
                            <js:output value="employee.lastName"/>                           
                        </td>
                        <td>
                            <js:output value="employee.position"/>
                        </td>
                        <td>
                            <js:output value="formatCurrency(employee.salary)"/>                            
                        </td>
                    </tr>
                </js:forEach>
            </js:tbody>
        </js:table>
    </body>
</html>
